import React, { useState } from "react"
import {
    Form,
    Input,
    Switch,
    Steps,
    Button,
    message
} from 'antd';
import { post } from '../../util/post'
import AliyunOSSUpload from "../../components/Upload"
import { useNavigate } from "react-router-dom";
import style from './index.module.css'
export default function Settle() {
    const [imgData, setImgData] = useState('')
    const navigate = useNavigate()
    const changeImgList = (a) => {
        console.log(a, 'image');
        if (a.length === 0) setImgData('')
        else {
            const s = 'https://onlineorder.oss-cn-shenzhen.aliyuncs.com/' + a[0].url
            setImgData(s)
        }
    }
    const token = localStorage.getItem('TOKEN');
    const onFinish = async (data) => {
        data.image = imgData
        data.businessStatus = data.businessStatus===undefined?0:Number(data.businessStatus)
        const res = await post('/shop/auditrecord/apply', data, token)
        if (res.data.code === 0) {
            message.success('已发送申请')
            navigate('/store')
        } else {
            message.error(res.data.msg)
        }
    }
    return (
        <div className={style.bg}>
            <div className={style.form}>
                <Form
                    labelCol={{ span: 4, }}
                    wrapperCol={{ span: 14, }}
                    layout="horizontal"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="name"
                        label="门店名称"
                        rules={[
                            {
                                required: true,
                                message: '请输入门店名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="phone"
                        label="门店电话"
                        rules={[
                            {
                                required: true,
                                message: '请输入门店电话',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="address"
                        label="门店地址"
                        rules={[
                            {
                                required: true,
                                message: '请输入门店地址',
                            },
                        ]}
                    >
                        <Input
                            style={{
                                width: '100%',
                            }}
                        />
                    </Form.Item>
                    <Form.Item label={"图片"} name={'image'}>
                        <AliyunOSSUpload value={imgData} changeImgList={(data) => changeImgList(data)} />
                    </Form.Item>
                    <Form.Item label="营业状态" name={'businessStatus'} valuePropName="checked">
                        <Switch />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            提交申请
                        </Button>
                    </Form.Item>
                </Form>

                {/*<Button onClick={()=>{*/}
                {/*    navigate('/store')*/}
                {/*}}>已有门店，点击进入</Button>*/}
            </div>

        </div>
    )
}
